/**
 * Sample React Native App By Wyh
 * Created by wyh on 15/12/23.
 */
'use strict';

import React, {
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  PixelRatio,
  Platform,
  TextInput,
  ScrollView,
} from 'react-native';

import {
  msg,
  mixins,
} from 'iflux-native';

import {QMBtnContainer} from 'qmkit';

import appStore from './store';

const StoreMixin = mixins.StoreMixin;

const WIDTH = require('Dimensions').get('window').width;
const HEIGHT = require('Dimensions').get('window').height;


const Login = React.createClass({
  mixins: [StoreMixin(appStore)],


  render() {

    const store = appStore.data();
    console.log('username===' + store.get('username'));
    console.log('password===' + store.get('password'));
    console.log('isHide===' + store.get('isHide'));

    return (
      <View style={{flex:1}}>
        <Image style={{top: 0, bottom: 0, left: 0, right: 0, position: 'absolute', width: WIDTH, height: HEIGHT}}
               source={require('img/login_background.png')}/>

        <ScrollView style={styles.container}
                    contentContainerStyle={styles.container}
                    scrollEnable={false}
                    keyboardShouldPersistTaps={false}
                    automaticallyAdjustContentInsets={false}>

          <View style={styles.logo}>
            <Image style={styles.logo_img}
                   source={{uri: 'http://pickaface.net/includes/themes/clean/img/slide2.png'}}/>
          </View>

          <View style={styles.loginContainer}>
            {/*用户名*/}
            <View style={styles.inputBox}>
              <Image style={styles.img} source={require('img/user_white.png')}/>
              <TextInput style={styles.input}
                         underlineColorAndroid='transparent'
                         placeholder='of1410'
                         placeholderTextColor='rgba(255,255,255,0.5)'
                         value={store.get('username')}
                         onChangeText={(username) => msg.emit('login:usernameChange', username)}/>
            </View>
            {/*密码*/}
            <View style={styles.inputBox}>
              <Image style={styles.img} source={require('img/lock_white.png')}/>
              <TextInput style={styles.input}
                         underlineColorAndroid='transparent'
                         placeholder='111111'
                         placeholderTextColor='rgba(255,255,255,0.5)'
                         cleanButtonMode='white-editing'
                         password={store.get('isHide')}
                         value={store.get('password')}
                         onChangeText={(password) => msg.emit('login:passwordChange', password)}/>
              <QMBtnContainer style={styles.switch}
                              onPress={this._handlePwdBtnChange}>
                <Image style={styles.eye}
                       source={store.get('isHide') ? require('img/eye_close.png') : require('img/eye_open.png')}/>
              </QMBtnContainer>
            </View>
            {/*登录按钮*/}
            <QMBtnContainer style={styles.btn}
                            onPress={this._handleLogin}>
              <Text style={{color: '#FFF', fontSize: 18}}>登录</Text>
            </QMBtnContainer>

          </View>
        </ScrollView>
      </View>
    );
  },


  /**
   * 密码隐藏、显示切换
   */
  _handlePwdBtnChange() {
    msg.emit('login:pwdBtnChange');
  },

  _handleLogin(){
    /*if(appStore.data().get('username').trim() === ''){
      console.log('请输入用户名');
      msg.emit('app:tip', '请输入用户名');
      return false;
    }

    if(appStore.data().get('password').trim() === ''){
      console.log('请输入密码');
      msg.emit('app:tip', '请输入密码');
      return false;
    }
*/
    msg.emit('login:login');
  },

});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  logo: {
    flex: 1,
    marginTop: Platform.OS === 'ios' ? 60 : 30,
    paddingBottom: 25,
  },
  loginContainer: {
    flex: 3,
    alignItems: 'center',
    paddingTop: 1,
    paddingLeft: 25,
    paddingRight: 25,
  },
  logo_img: {
    width: 100,
    height: 120,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    backgroundColor: 'transparent',
  },
  inputBox: {
    alignSelf: 'stretch',
    flexDirection: 'row',
    marginTop: 15,
    marginLeft: 5,
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: 'lightblue',
  },
  input: {
    flex: 1,
    color: 'white',
    height: 40,
    fontSize: 16,
    paddingLeft: 15,
  },
  img: {
    marginTop: 9,
    width: 22,
    height: 22,
  },
  switch: {
    paddingLeft: 10,
    paddingRight: 5,
    paddingTop: 12,
    height: 40,
  },
  eye: {
    width: 25,
    height: 17,
  },
  btn: {
    backgroundColor: '#43c6a',
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 13,
    paddingBottom: 13,
    marginTop: 30,
    borderRadius: 3,
  },

});

module.exports = Login;